<script setup lang="ts">
import { ref, h, defineProps } from 'vue';
import { useRoute , useRouter } from 'vue-router'
import { NCard, NButton, NFlex, NDropdown, NCollapse, NCollapseItem, NGrid, NGi,NCalendar } from 'naive-ui'
import SvgIcon from '@/components/SvgIcon.vue'

//定义路由
const route = useRoute()
const router = useRouter()
/**
 * 这是一个专门处理我的日程计划和个人工作台的组件
 * 主要处理任务项
 * 通知收件箱
 * 日程计划
 * 日程计划模板
 * 日程计划标签
 * 日程计划分享
 * 数据看板
 * 重要事项
 * 待办事项
 * 采取面板的方式，划分三个区域内容进行处理
 */
//接收props
const props = defineProps({
  title: {
    type: String,
    default: '应用的名称' // 默认值
  },
  icon: {
    type: String,
    default: 'close' // 默认值
  }
})


const options = [
  { label: '新建任务文件', key: '新建任务文件' },
  { label: '问询任务', key: '问询任务' },
  { label: '日程计划提醒', key: '日程计划提醒' },
  { label: '日程计划标签', key: '日程计划标签' },
  { label: '日程计划分享', key: '日程计划分享' },
  { label: '日程计划删除', key: '日程计划删除' },
  { label: '日程计划归档', key: '日程计划归档' },
  { label: '日程计划模板', key: '日程计划模板' },
  { label: '日程计划导入', key: '日程计划导入' },
  { label: '日程计划导出', key: '日程计划导出' },
]
const handleSelect = (key: string) => {
  console.log(key)
}
let renderIcon = () => {
  return h(NFlex, () => [h(NDropdown, { trigger: "hover", size: "huge", showArrow: true, options: options, onSelect: handleSelect }, () => h(NButton, { text: true, style: 'font-size: 24px' }, () => h(SvgIcon, { iconClass: props.icon }))), h('div', props.title)])
}
const headerTitel = () => renderIcon()


/**
 * 关闭事件，原则上返回路由的上一页
 */
const handleClose = () => {
  console.log('关闭不了这个应用')
  router.go(-1)
}




</script>

<template>
  <n-card :title="headerTitel" style="height: 100%;" closable @close="handleClose">

    <template #header-extra>
      <slot name="header-extra"></slot>
    </template>
    <template #default>
      <slot></slot>
      <n-grid x-gap="12" :cols="3">
        <!-- 左侧区域 -->
        <n-gi>
          <n-collapse default-expanded-names="1" accordion>
            <n-collapse-item title="我的日程表" name="1">
              <n-calendar >
                
              </n-calendar>
            </n-collapse-item>
            <n-collapse-item title="待办事项" name="2">
              <div></div>
            </n-collapse-item>
          </n-collapse>
        </n-gi>
        <!-- 中间区域 -->
        <n-gi>
          <n-collapse default-expanded-names="1" accordion>
            <n-collapse-item title="今日任务目标公开栏" name="1">
              <div></div>
            </n-collapse-item>
            <n-collapse-item title="AI智能助理" name="2">
              <div></div>
            </n-collapse-item>
          </n-collapse>
        </n-gi>
        <!-- 右侧区域 -->
        <n-gi>
          <n-collapse default-expanded-names="1" accordion>
            <n-collapse-item title="数据监测板" name="1">
              <div></div>
            </n-collapse-item>
            <n-collapse-item title="通知消息公告栏" name="2">
              <div></div>
            </n-collapse-item>
          </n-collapse>
        </n-gi>

      </n-grid>

    </template>

    <template #footer>
      <slot name="footer"></slot>
    </template>
    <template #action>
      <slot name="action"></slot>
    </template>
  </n-card>
</template>

<style scoped></style>
